/*
 * @Descripttion:
 * @Author: voanit
 * @Date: 2022-05-05 11:50:18
 * @LastEditors: voanit
 * @LastEditTime: 2022-05-05 14:43:11
 */
import React from 'react'

class Classcon extends React.Component {
  state = {
    val: '我是表单',
    username: 'jack',
    desc: '帅锅',
    city: '2',
    isSingle: true,
    val2: '1111',
  }
  // handle = (e) => {
  //   console.log(e.target.value, 88)
  //   this.setState({
  //     val: e.target.value,
  //   })
  // }
  handleChange = (e) => {
    console.log(e.target.name, 77)
    // console.log(e.target.value, 88)
    // console.log(e.target.checked, 88)
    var key = e.target.name //username | city |desc |isSingle
    this.setState({
      [key]: key === 'isSingle' ? e.target.checked : e.target.value,
    })
  }

  txtRef = React.createRef()

  handleChange2 = () => {
    // 非受控组件函数
    console.log(this.txtRef.current.value, 8)
    this.setState({
      val2: this.txtRef.current.value,
    })
  }
  render() {
    return (
      // <div>
      //   御剑乘风来,除魔天地间!==Classcon==={this.state.val}==
      //   <input
      //     type="text"
      //     onChange={this.handle}
      //     value={this.state.val}
      //     placeholder="请输入内容"
      //   />
      // </div>
      <div>
        姓名：
        <input
          type="text"
          name="username"
          value={this.state.username}
          onChange={this.handleChange}
        />
        =={this.state.username}
        <br />
        描述：
        <textarea
          name="desc"
          value={this.state.desc}
          onChange={this.handleChange}
        ></textarea>
        =={this.state.desc}
        <br />
        城市：
        <select
          name="city"
          value={this.state.city}
          onChange={this.handleChange}
        >
          <option value="1">北京</option>
          <option value="2">上海</option>
          <option value="3">广州</option>
          <option value="4">深圳</option>
        </select>
        =={this.state.city}
        <br />
        是否单身：
        <input
          type="checkbox"
          name="isSingle"
          checked={this.state.isSingle}
          onChange={this.handleChange}
        />
        =={this.state.isSingle}
        <hr />
        非受控组件：
        <input type="text" ref={this.txtRef} onChange={this.handleChange2} />
        === =={this.state.val2}
      </div>
    )
  }
}
export default Classcon
